{% extends "背景板.html" %}
{% block sidebar %}
<li><a href="{{url_for('products.products')}}">商品管理</a></li>
<li><a href="{{url_for('member.members')}}">会员管理</a></li>
<li><a href="{{url_for('sale.saleorders')}}">销售管理</a></li>
<li><a href="{{url_for('purchase_orders.purchase_orders')}}">采购管理</a></li>
<li><a href="{{url_for('sale.display_analysis')}}">统计分析</a></li>
{% endblock %}
{% block main %}
<style>
    /* 样式表 */
    table {
      border-collapse: collapse;
      width: 100%;
      margin-bottom: 20px;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border: 1px solid #ddd;
    }
    th {
      background-color: #f2f2f2;
    }
    .product-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding: 10px;
      border: 1px solid #ddd;
    }
    .product-row h4 {
      margin-top: 0;
      margin-bottom: 5px;
    }
    .product-row p {
      margin-top: 0;
      margin-bottom: 5px;
      font-size: 14px;
    }
    .product-row .price {
      font-weight: bold;
      font-size: 16px;
    }
    .qr-code {
      display: flex;
      align-items: center;
    }
    .qr-code img {
      max-width: 100%;
      height: auto;
    }
    .buttons {
      display: flex;
    }
    .buttons button {
      margin-left: 10px;
      padding: 5px 10px;
      color: white;
      font-weight: bold;
      cursor: pointer;
    }
    .manage-button {
      background-color: #00bfff;
    }
    .delete-button {
      background-color: #ffb6c1;
    }
    /* 分界线 */
    .separator {
      border-top: 1px solid #ddd;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    /* 模态框样式 */
    .modal {
      display: none; /* 默认不显示 */
      position: fixed; /* 覆盖整个视口 */
      z-index: 1; /* 放在最上面 */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4); /* 半透明黑色背景 */
    }
    .modal-content {
      background-color: #fefefe; /* 白色背景 */
      margin: 15% auto; /* 居中 */
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px; /* 最大宽度 */
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }
    .close:hover, .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }
    /* 输入框样式 */
    input[type=text], select, textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 6px;
      margin-bottom: 16px;
      resize: vertical;
    }
    input[type=submit] {
      background-color: #00bfff;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    input[type=submit]:hover {
      background-color: #0080ff;
    }

      .product-info {
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    .search-box {
        margin-bottom: 10px;
    }
    .search-box input {
        width: 300px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    .search-box button {
        padding: 5px 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>

<div class="product-info">
    <h1>采购订单商品信息</h1>
    <p>订单编号:{{purchase_order.id}}    采购时间:{{purchase_order.purchase_time}}</p>
</div>
<!-- 商品列表 -->
<table>
    <tr>
        <th>商品名称</th>
        <th>采购单价</th>
        <th>采购数量</th>
        <th>供应商</th>

    </tr>
    {% for product in products %}
    <tr>
        <td>{{ product.name }}</td>
        <td>{{ product.purchase_price }}</td>
        <td>{{ product.purchase_quantity }}</td>
        <td>{{ product.supplier }}</td>
    </tr>
    {% endfor %}
</table>
{% endblock %}